<template>
    <app-page>
        <div class="bill_index">
            <div class="bill_header">
                <div class="names">
                    <div class="name">{{ username }}</div>
                    <div class="time">授权：{{ created }}-至今</div>
                </div>
                <div style="margin-right: 64px">
                    <img src="@/assets/bill/shouquanbg.png" style="width: 200px;height: 88px" alt="">
                </div>
            </div>
            <Tabs :acyivetabs="acyivetabs" @change="changetabs" :activetype="activetype"
                @changeactivebctype="changeactivebctype" />
            <Overview :billdata="billdata" v-if="activetype == 0" />
            <Table :billdata="billdata" v-loading="loading" v-if="activetype == 0" />
            <Table2 :billdata="billdata" v-loading="loading" v-if="activetype == 1" />
        </div>
    </app-page>
</template>

<script setup>
import { http } from '@/utils/http'
import Tabs from "./components/Tabs.vue";
import Overview from "./components/Overview.vue";
import Table from "./components/Table.vue";
import Table2 from "./components/Table2.vue";
const router = useRouter()

const userid = ref('')
const username = ref('')
const created = ref('--')
const bctype = ref('')

const activetype = ref(0)

const loading = ref(false)
const billdata = ref({
    all: {},
    day: {}
})
const acyivetabs = ref({
    value: 0,
    begin_time: '',
    end_time: ''
})

const getmemberbill = () => {
    loading.value = true
    let body = {
        params: {
            id: userid.value,
            begin_time: acyivetabs.value.begin_time,
            end_time: acyivetabs.value.end_time,
        }
    }
    console.log(activetype.value);
    billdata.value = {
        all: {},
        day: {}
    }
    http.get('member/member_bill', body).then((res) => {
        loading.value = false
        billdata.value = res.data
    }).catch(() => {
        loading.value = false
    })
}

const changetabs = () => {
    let a = getDateRange(acyivetabs.value.value)
    acyivetabs.value.begin_time = a.startDate
    acyivetabs.value.end_time = a.endDate

    console.log(a);
    

    if (activetype.value == 0) {
        getmemberbill()
    } else {
        getmemberplatformbill()
    }
}

const changeactivebctype = (value) => {
    activetype.value = value
    if (activetype.value == 0) {
        getmemberbill()
    } else {
        getmemberplatformbill()
    }

}

const getDateRange = (type) => {
    const today = new Date(); // 当前日期
    let startDate, endDate;

    if (type === 0) { // 上周
        // 获取当前周的周一和周日
        const currentDay = today.getDate();
        const currentDayOfWeek = today.getDay(); // 星期几

        // 计算上周的周一和周日
        const firstDayOfWeek = new Date(today)
        firstDayOfWeek.setDate(currentDay - currentDayOfWeek + 1);
        firstDayOfWeek.setHours(12, 0, 0, 0);
        
        const lastDayOfWeek = firstDayOfWeek + 6; // 当前周的周日

        // 设置为上周的日期
        const firstDate = new Date(today);
        firstDate.setDate(firstDayOfWeek.getDate() - 7); // 上周的周一

        const lastDate = new Date(today);
        // lastDate.setDate(lastDayOfWeek - 7); // 上周的周日
        lastDate.setDate(firstDayOfWeek.getDate());

        startDate = formatDate(firstDate);
        endDate = formatDate(lastDate);
    } else if (type === 1) { // 本周
        // 获取当前周的周一和周日
        const currentDay = today.getDate();
        const currentDayOfWeek = today.getDay(); // 星期几

        const firstDayOfWeek = new Date(today)
        firstDayOfWeek.setDate(currentDay - currentDayOfWeek + 1);
        firstDayOfWeek.setHours(12, 0, 0, 0);

        const lastDayOfWeek = firstDayOfWeek + 6; // 当前周的周日

        const firstDate = new Date(today);
        firstDate.setDate(firstDayOfWeek.getDate()); // 本周的周一

        const lastDate = new Date(today);
        // lastDate.setDate(lastDayOfWeek); // 本周的周日
        lastDate.setDate(firstDayOfWeek.getDate() + 7);

        startDate = formatDate(firstDate);
        endDate = formatDate(lastDate);
    } else if (type === 2) { // 上月
        // 获取上个月的开始和结束日期
        const firstDayOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1); // 上个月的第一天
        // const lastDayOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0); // 上个月的最后一天
        const lastDayOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 1); // 本月的第一天

        startDate = formatDate(firstDayOfLastMonth);
        endDate = formatDate(lastDayOfLastMonth);
    } else if (type === 3) { // 本月
        // 获取本月的开始和结束日期
        const firstDayOfThisMonth = new Date(today.getFullYear(), today.getMonth(), 1); // 本月的第一天
        // const lastDayOfThisMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0); // 本月的最后一天
        const lastDayOfThisMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1); // 本月的第一天

        startDate = formatDate(firstDayOfThisMonth);
        endDate = formatDate(lastDayOfThisMonth);
    }

    return { startDate, endDate };
}
function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');

    return `${year}-${month}-${day}`;
}

const getmemberplatformbill = () => {
    loading.value = true
    let body = {
        params: {
            user_name: username.value,
            begin_time: acyivetabs.value.begin_time,
            end_time: acyivetabs.value.end_time,
            bc_type: bctype.value
        }
    }
    billdata.value = {
        all: {},
        day: {}
    }
    http.get('/member/member_platform_bill', body).then((res) => {
        billdata.value = res.data
        loading.value = false
    }).catch(() => {
        loading.value = false
    })
}
onMounted(() => {
    userid.value = router.currentRoute.value.query.id
    username.value = router.currentRoute.value.query.name
    created.value = router.currentRoute.value.query.created
    bctype.value = router.currentRoute.value.query.bc_type
    console.log(router.currentRoute.value);

    changetabs()
    // getmemberbill()
})
</script>

<style lang="scss" scoped>
.bill_index {
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bill_header {
    width: 100%;
    height: 64px;
    padding: 0 16px;
    background-image: linear-gradient(to right, #f5ebb1, #a0f7e8);
    display: flex;
    justify-content: space-between;
    // align-items: center;
    position: relative;

    .names {
        display: flex;
        align-items: center;

        .name {
            font-size: 20px;
            font-weight: 600;
            color: #333;
            margin-right: 8px;

        }

        .time {
            height: 20px;
            padding: 0 8px;
            border-radius: 10px 10px 10px 0;
            background-color: #fff;
            font-size: 12px;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: center;

        }
    }
}
</style>